<template>
  <div class="app-container AImodel-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="产品名称" prop="ainame">
        <el-input v-model="state.queryParams.ainame" placeholder="产品名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>
      <!-- 按钮组件 -->
      <all-button
        :buttonType="['add', 'query', 'refresh']"
        @addButton="aimodelEditRef.openDialog()"
        @queryButton="handleQuery({initPageIndex: true})"
        @refreshButton="handleQuery({initPageIndex: true})"
      />

      <!-- <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery({initPageIndex: true})">搜索</el-button>
        <el-button type="primary" icon="Plus" plain @click="aimodelEditRef.openDialog()">新增</el-button>
      </el-form-item> -->
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="id" style="flex: 1" stripe border table-layout="fixed">
      <el-table-column align="center" prop="ainame" label="产品名称" min-width="100"></el-table-column>
      <el-table-column align="center" prop="aimodelname" label="模型名称" min-width="100"></el-table-column>
      <el-table-column align="center" prop="aicjsd" label="场景设定" min-width="100" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column align="center" prop="aiorganization" label="组织编号" min-width="100"></el-table-column>
      <el-table-column align="center" prop="aitype" label="产品类型" min-width="70"></el-table-column>
      <el-table-column align="center" prop="aitemperature" label="回复多样性" min-width="70"></el-table-column>
      <el-table-column align="center" prop="aiimgsize" label="生成图片大小" min-width="70"></el-table-column>
      <el-table-column align="center" prop="aiimgnum" label="单次生成数量" min-width="70"></el-table-column>
      <el-table-column align="center" prop="aiiscontext" label="启用上下文" min-width="70">
        <template #default="scope">
          <el-switch
            v-model="scope.row[scope.column.property]"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="是"
            inactive-text="否"
            :loading="scope.row.loading"
            @change="availableChange(scope.row, $event)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="aimaxtokens" label="最大会话长度" min-width="70"></el-table-column>
      <el-table-column align="center" prop="aistatus" label="产品是否启用" min-width="70">
        <template #default="scope">
          <el-switch
            v-model="scope.row[scope.column.property]"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="停用"
            :loading="scope.row.loading"
            @change="availableChange(scope.row, $event)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="aicreatedate" label="产品创建时间" min-width="120"></el-table-column>
      <el-table-column label="操作" :width="fitWidth" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <div class="operation-box">
            <el-text class="operate-btn-item" type="primary" @click="aimodelEditRef.openDialog(scope.row)">编辑</el-text>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex"
        :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total"
      >
      </el-pagination>
    </div>

    <AImodelEdit width="70%" ref="aimodelEditRef" @refresh="handleQuery" />
  </div>
</template>

<script setup name="AImodel">
import useAImodelManageStore from '@store/modules/aimodelManage'
import AImodelEdit from './components/AImodelEdit/index.vue'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'

const {proxy} = getCurrentInstance()
const aimodelManageStore = useAImodelManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)
const {fitWidth} = useFitColumn()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    ainame: ''
  }
})
const aimodelEditRef = ref(null)

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const {Total, Data} = await aimodelManageStore.list(query)
  paginaionConfig.total = Total
  state.tableData = Data

  state.tableLoading = false
}

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

const availableChange = async (row, newVal) => {
  row.loading = true
  try {
    // await aimodelManageStore.sysuserUp({ account: row.account, available: newVal })
    // row.loading = false
    // proxy.$modal.msgSuccess('操作成功！')
  } catch (error) {
    handleQuery()
  }
}

onMounted(() => {
  handleQuery({initPageIndex: true})
})
</script>
